<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>编辑权限</div>
            </template>
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="路由:" prop="path">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="路由描述:" prop="desc">
                    <el-input v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="请求方法:">
                    <el-select v-model="form.method">
                        <el-option value="post">增添</el-option>
                        <el-option value="get">获取</el-option>
                        <el-option value="delete">删除</el-option>
                        <el-option value="put">更新</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属组名:2-18个字符:" prop="group">
                    <el-input v-model="form.group"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="editPolicie">保存</el-button>
                    <el-button @click="$router.push({name:'PoliciesIndex'})">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script>
import { getPolicie, editPolicie } from "@/api/policies";
export default {
    data() {
        return {
            loading: false,
            la: {},
            form: {
                path:'',
                desc:'',
                group:'',
            },
            rules: {
                path: [
                    { required: true, message: '路由名称要加/', trigger: 'blur' },
                ],
                desc: [
                    { required: true, message: '路由不能为空', trigger: 'blur' },
                ],
                group: [
                    { required: true, message: '路由不能为空', trigger: 'blur' },
                ],
            }
        };
    },
    async created() {
        await this.getPolicie();
    },
    methods: {
        async getPolicie() {
            const { data } = await getPolicie(this.$route.query.id);
            this.la = { ...data }
            this.form = data;
        },

        async editPolicie() {
            try {
                await editPolicie(this.$route.query.id, {
                    path: this.form.path,
                    method: this.form.method,
                    desc: this.form.desc,
                    group: this.form.group,
                });
                this.$router.push({ name: "PoliciesIndex" });
            } catch (error) { }
        },
    },
};
</script>
  